<template>
  <div>
    <a-modal v-model="visible" :title="title" :width="900" centered destroyOnClose class="return-modal" @ok="handleSubmit">
      <p class="tip">
        <!-- 未入库商品：1，如已和会员协商购买，请在购买后点击异常处理中已购买；2，如会员需要二次还货，请点击再次还货 -->
      </p>
      <a-checkbox-group @change="onAbnormalChange" v-model="abnormalValue" style="width: 100%">
        <a-table :rowKey="record => record.boxDetails.id" :columns="columns" :data-source="data" :pagination="false">
          <span slot="serial" slot-scope="text, record, index">
            {{ index + 1 }}
          </span>
          <span slot="goods" slot-scope="text, record">
            <ListInfo :record="record.boxDetails"></ListInfo>
          </span>
          <span slot="price" slot-scope="text, record">
            <p class="red special-price" v-if="record.boxDetails.vipPrice">¥ {{ record.boxDetails.vipPrice }}</p>
            <p class="red special-price" v-else-if="record.boxDetails.productFavorablePrice">¥ {{ record.boxDetails.productFavorablePrice }}</p>
            <p :class="[record.boxDetails.vipPrice || record.boxDetails.productFavorablePrice ? 'has-special' : '', 'origin-price']">¥ {{ text }}</p>
          </span>
          <span slot="status" slot-scope="text, record">
            {{ record.boxReturnDetails.retStatus | goodsStatus }}
          </span>
          <span slot="action" slot-scope="text, record">
            <a-checkbox :value="record.boxReturnDetails.id"> 移除 </a-checkbox>
          </span>
        </a-table>
      </a-checkbox-group>
    </a-modal>
  </div>
</template>
<script>
import ListInfo from '@views/box/components/goodsInfo/listInfo'
import { handleReturnError, noInReturnDetails, getReturnDetails } from '@/api/box/order'
const columns = [
  {
    title: '序号',
    align: 'center',
    // dataIndex: 'productNo',
    scopedSlots: { customRender: 'serial' },
    width: '10%'
  },
  {
    title: '商品',
    dataIndex: 'boxDetails',
    scopedSlots: { customRender: 'goods' },
    width: '50%'
  },
  {
    title: '单价',
    dataIndex: 'boxDetails.productPrice',
    width: '20%',
    scopedSlots: { customRender: 'price' }
  }
]
export default {
  components: {
    ListInfo
  },
  data() {
    return {
      visible: false,
      boxReturnId: '',
      type: '',
      title: '',
      data: [],
      abnormalValue: []
    }
  },
  filters: {
    goodsStatus(v) {
      if (v == 1) {
        return '待入库'
      } else if (v == 2) {
        return '已完成'
      }
    }
  },
  computed: {
    columns() {
      let newcolumns = []
      if (this.type == 'edit') {
        newcolumns = [
          ...columns,
          ...[
            {
              title: '操作',
              dataIndex: 'action',
              scopedSlots: { customRender: 'action' }
            }
          ]
        ]
      } else if (this.type == 'detail') {
        newcolumns = [
          ...columns,
          ...[
            {
              title: '状态',
              // dataIndex: 'boxReturnDetails.retStatus',
              scopedSlots: { customRender: 'status' }
            }
          ]
        ]
      }
      return newcolumns
    }
  },
  methods: {
    show(type, id) {
      this.boxReturnId = id
      if (type == 'edit') {
        this.title = '异常处理'
        this.fetchNoInReturn()
      } else if (type == 'detail') {
        this.title = '还货信息'
        this.fetchReturn()
      }
      this.type = type
      this.visible = true
    },
    fetchNoInReturn() {
      let params = {
        requestData: {
          boxReturnId: this.boxReturnId
        }
      }
      noInReturnDetails(params).then(res => {
        if (res.code == 0) {
          this.data = res.data
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    fetchReturn() {
      let params = {
        requestData: {
          boxReturnId: this.boxReturnId
        }
      }
      getReturnDetails(params).then(res => {
        if (res.code == 0) {
          this.data = res.data
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    onAbnormalChange(checkedValues) {
      console.log('checked = ', checkedValues)
      this.abnormalValue = checkedValues
    },
    handleSubmit() {
      if (this.type == 'edit') {
        let params = {
          requestData: {
            boxReturnId: this.boxReturnId,
            boxReturnDetails: this.abnormalValue
          }
        }
        handleReturnError(params).then(res => {
          if (res.code == 0) {
            this.$message.success('处理成功！')
            this.visible = false
            this.$emit('refresh')
          } else {
            this.$message.warning(res.msg)
          }
        })
      } else {
        this.visible = false
      }
    }
  }
}
</script>
<style src="../less/modal.less" lang="less" scoped></style>
<style lang="less" scoped>
.red {
  color: #f45555;
  margin-right: 24px;
  font-size: 20px;
}
.special-price {
  font-size: 14px;
  // margin-bottom: 4px;
  margin-right: 0;
}
.has-special {
  text-decoration: line-through;
}
.origin-price,
.special-price {
  margin-bottom: 4px;
}
</style>
